<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <!-- 最大的容器 -->
    <div class="container">
      <!-- 上面的导航栏 -->
      <div class="topnav clearfix">
        <div class="topnav1">
          <a href="javascript:;" class="music">
            <dt></dt>
          </a>
          <ul>
            <li><a href="javascript:;">发现音乐</a></li>
            <li><a href="javascript:;">我的音乐</a></li>
            <li><a href="javascript:;">朋友</a></li>
            <li><a href="javascript:;">商城</a></li>
            <li><a href="javascript:;">音乐人</a></li>
            <li>
              <a href="javascript:;" class="hot">
                <dt></dt>
                下载客户端</a
              >
            </li>
          </ul>
          <div class="searchbox">
            <div class="seek">
              <div class="srchbg">
                <span class="parent">
                  <input type="text" />
                  <i class="iconfont"></i>
                  <label>音乐/视频/电台/用户</label>
                </span>
              </div>
            </div>
            <button>创作者中心</button>
            <div class="denglu">
              <a href="javascript:;">登录</a>
            </div>
          </div>
        </div>
      </div>
      <!-- 上面第二个导航栏 -->
      <div class="topnav2">
        <div class="red-nav">
          <ul>
            <li>
              <a href="javascript:;" class="hello">
                <i class="iconfont"></i>
                推荐
              </a>
            </li>
            <li><a href="javascript:;">排行榜</a></li>
            <li><a href="javascript:;">歌单</a></li>
            <li><a href="javascript:;">主播电台</a></li>
            <li><a href="javascript:;">歌手</a></li>
            <li><a href="javascript:;">新碟上架</a></li>
          </ul>
        </div>
      </div>
      <!-- 轮播图 -->
      <div class="slide-box">
        <div class="images">
          <a href="javascript:;" class="active"
            ><img src="./图片/lbt1.jpg" alt=""
          /></a>
          <a href="javascript:;"><img src="./图片/lbt2.jpg" alt="" /></a>
          <a href="javascript:;"><img src="./图片/lbt3.jpg" alt="" /></a>
          <a href="javascript:;"><img src="./图片/lbt4.jpg" alt="" /></a>
          <a href="javascript:;"><img src="./图片/lbt5.jpg" alt="" /></a>
        </div>
        <div class="navs clearfix">
          <a href="javascript:;" class="prev"></a>
          <a href="javascript:;" class="next"></a>
        </div>
        <div class="pages">
          <a href="javascript:;" class="dot active"></a>
          <a href="javascript:;" class="dot"></a>
          <a href="javascript:;" class="dot"></a>
          <a href="javascript:;" class="dot"></a>
          <a href="javascript:;" class="dot"></a>
        </div>
        <div class="stop-img">
          <img src="" alt="" class="image1" />
          <a href="javascript:;"><img src="" alt="" class="image2" /></a>
          <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
        </div>
      </div>

      <!-- 中间的大容器 -->
      <div class="content-box">
        <!-- n多个列表 -->
        <div class="center-top clearfix">
          <div class="content">
            <div class="items">
              <div class="upper clearfix">
                <a href="#" class="hot">
                  <i class="iconfont"></i>
                  热门推荐
                </a>
                <div class="center">
                  <a href="#">华语</a>
                  <a href="#">华语</a>
                  <a href="#">华语</a>
                  <a href="#">华语</a>
                  <a href="#">华语</a>
                </div>
                <span class="more">
                  <a href="#"
                    >更多
                    <i class="iconfont"></i>
                  </a>
                </span>
              </div>
              <div class="item">
                <ul class="clearfix">
                  <li>
                    <a href="javascript:;">
                      <img src="./图片/古风.jpg" alt="" />
                    </a>
                    <p>
                      宝藏音乐观丨舒适旋律渲染微醺夜色
                    </p>
                    <p class="bot-box"></p>
                  </li>
                  <li>
                    <a href="javascript:;">
                      <img src="./图片/大鱼.jpg" alt="" />
                    </a>
                    <p>
                      <i class="icon-meau"></i>
                      宝藏音乐观丨舒适旋律渲染微醺夜色
                    </p>
                  </li>
                  <li>
                    <a href="javascript:;">
                      <img src="./图片/游戏.jpg" alt="" />
                    </a>
                    <p>
                      宝藏音乐观丨舒适旋律渲染微醺夜色
                    </p>
                  </li>
                  <li>
                    <a href="javascript:;">
                      <img src="./图片/伤感.jpg" alt="" />
                    </a>
                    <p>
                      宝藏音乐观丨舒适旋律渲染微醺夜色
                    </p>
                  </li>
                  <li>
                    <a href="javascript:;">
                      <img src="./图片/古风.jpg" alt="" />
                    </a>
                    <p>
                      宝藏音乐观丨舒适旋律渲染微醺夜色
                    </p>
                    <p class="bot-box"></p>
                  </li>
                  <li>
                    <a href="javascript:;">
                      <img src="./图片/大鱼.jpg" alt="" />
                    </a>
                    <p>
                      宝藏音乐观丨舒适旋律渲染微醺夜色
                    </p>
                  </li>
                  <li>
                    <a href="javascript:;">
                      <img src="./图片/游戏.jpg" alt="" />
                    </a>
                    <p>
                      <i class="icon-meau"></i>
                      宝藏音乐观丨舒适旋律渲染微醺夜色
                    </p>
                  </li>
                  <li>
                    <a href="javascript:;">
                      <img src="./图片/伤感.jpg" alt="" />
                    </a>
                    <p>
                      宝藏音乐观丨舒适旋律渲染微醺夜色
                    </p>
                  </li>
                  
                </ul>
              </div>
            </div>
            <div class="items">
              <div class="upper clearfix">
                <a href="#" class="hot">
                  <i class="iconfont"></i>
                  新碟上架
                </a>
                
                <span class="more">
                  <a href="#"
                    >更多
                    <i class="iconfont"></i>
                  </a>
                </span>
              </div>
              
            </div>
             <!-- 右侧的许多列表 -->
            <div class="right-nav">
              <div class="online clearfix">
                <span
                  >登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</span
                >
                <div class="btn-center">
                  <button>用户登录</button>
                </div>
              </div>
              <div class="stay">
                <div class="top clearfix">
                  <span>入驻歌手</span>
                  <a href="javascript:;">查看全部&gt;</a>
                </div>
                <div class="artists">
                  <div class="artist clearfix">
                    <img src="./图片/张惠妹.jpg" alt="" />
                    <div class="text">
                    <span>张惠妹aMEI</span>
                    <span>台湾歌手张惠妹</span>
                  </div>
                  </div>
                </div>
                <div class="artists">
                  <div class="artist clearfix">
                    <img src="./图片/张惠妹.jpg" alt="" />
                    <div class="text">
                    <span>张惠妹aMEI</span>
                    <span>台湾歌手张惠妹</span>
                  </div>
                  </div>
                </div>
                <div class="artists">
                  <div class="artist clearfix">
                    <img src="./图片/张惠妹.jpg" alt="" />
                    <div class="text">
                    <span>张惠妹aMEI</span>
                    <span>台湾歌手张惠妹</span>
                  </div>
                  </div>
                </div>
                <div class="artists">
                  <div class="artist clearfix">
                    <img src="./图片/张惠妹.jpg" alt="" />
                    <div class="text">
                    <span>张惠妹aMEI</span>
                    <span>台湾歌手张惠妹</span>
                  </div>
                  </div>
                </div>
                <div class="artists">
                  <div class="artist clearfix">
                    <img src="./图片/张惠妹.jpg" alt="" />
                    <div class="text">
                    <span>张惠妹aMEI</span>
                    <span>台湾歌手张惠妹</span>
                  </div>
                  </div>
                </div>
                <div class="foot">
                  <a>申请成为网易音乐人</a>
                </div>
              </div>
            </div>
          </div>
         
         
        </div>
      </div>
    </div>
    <script>
      var prev = document.querySelector(".prev");
      var next = document.querySelector(".next");
      var imgs = document.querySelectorAll(".slide-box .images a");
      var pages = document.querySelectorAll(".dot");
      var index = 0;
      var box = document.querySelector(".slide-box");
      function showImage(idx) {
        imgs.forEach(function (img, i) {
          if (i === idx) {
            img.classList.remove("active");
            img.classList.add("active");
            pages[i].classList.remove("active");
            pages[i].classList.add("active");
          } else {
            img.classList.remove("active");
            pages[i].classList.remove("active");
          }
        });
      }
      next.onclick = function () {
        if (index === imgs.length - 1) {
          index = 0;
        } else {
          index += 1;
        }
        showImage(index);
      };
      prev.onclick = function () {
        if (index === 0) {
          index = imgs.length - 1;
        } else {
          index -= 1;
        }
        showImage(index);
      };
      var timer = setInterval(function () {
        next.click(); // 调用next元素的click事件。
      }, 4000);

      box.onmouseover = function () {
        clearInterval(timer);
      };

      box.onmouseout = function () {
        timer = setInterval(function () {
          next.click();
        }, 4000);
      };

      for (let i = 0; i < pages.length; i++) {
        const page = pages[i];
        page.onclick = function () {
          showImage(i);
          index = i;
        };
      }
    </script>
    <script src="./js/style.js"></script>
  </body>
</html>
